<template>
    <view>
        <view class="add-address">
            <view class="add-form">
                <view class="form-item">
                    <input class="input" @input="bindinputName" placeholder="姓名" :value="address.name" auto-focus />
                </view>
                <view class="form-item">
                    <input class="input" @input="bindinputMobile" :value="address.tel" placeholder="手机号码" />
                </view>
                <view class="form-item">
                    <input class="input" :value="address.province + address.city + address.county" :disabled="true" @tap="chooseRegion" placeholder="省份、城市、区县" />
                </view>
                <view class="form-item">
                    <input class="input" @input="bindinputAddress" :value="address.addressDetail" placeholder="详细地址, 如街道、楼盘号等" />
                </view>
                <view class="form-default">
                    <van-checkbox :value="address.isDefault == 1" @change="bindIsDefault">设为默认地址</van-checkbox>
                </view>
            </view>

            <view class="btns">
                <button class="cannel" @tap="cancelAddress">取消</button>
                <button class="save" @tap="saveAddress">保存</button>
            </view>

            <view class="region-select" v-if="openSelectRegion">
                <view class="hd">
                    <view class="region-selected">
                        <view
                            :class="'item ' + (item.code == 0 ? 'disabled' : '') + ' ' + (regionType - 1 === index ? 'selected' : '')"
                            @tap="selectRegionType"
                            :data-region-type-index="index"
                            v-for="(item, index) in selectRegionList"
                            :key="item.code"
                        >
                            {{ item.name }}
                        </view>
                    </view>
                    <view :class="'done ' + (selectRegionDone ? '' : 'disabled')" @tap="doneSelectRegion">确定</view>
                </view>
                <view class="bd">
                    <scroll-view scroll-y class="region-list">
                        <view
                            :class="'item ' + (item.selected ? 'selected' : '')"
                            @tap="selectRegion"
                            :data-region-index="index"
                            v-for="(item, index) in regionList"
                            :key="item.code"
                        >
                            {{ item.name }}
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
        <view class="bg-mask" @tap="cancelSelectRegion" v-if="openSelectRegion"></view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');

var api = require('../../../config/api.js');

var check = require('../../../utils/check.js');

var area = require('../../../utils/area.js');

var app = getApp();
export default {
    data() {
        return {
            address: {
                id: 0,
                areaCode: 0,
                address: '',
                name: '',
                tel: '',
                isDefault: 0,
                province: '',
                city: '',
                county: '',
                addressDetail: ''
            },
            addressId: 0,
            openSelectRegion: false,
            selectRegionList: [
                {
                    code: 0,
                    name: '省份'
                },
                {
                    code: 0,
                    name: '城市'
                },
                {
                    code: 0,
                    name: '区县'
                }
            ],
            regionType: 1,
            regionList: [],
            selectRegionDone: false
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        console.log(options);

        if (options.id && options.id != 0) {
            this.setData({
                addressId: options.id
            });
            this.getAddressDetail();
        }
    },
    onReady: function () {},
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        bindinputMobile(event) {
            let address = this.address;
            address.tel = event.detail.value;
            this.setData({
                address: address
            });
        },

        bindinputName(event) {
            let address = this.address;
            address.name = event.detail.value;
            this.setData({
                address: address
            });
        },

        bindinputAddress(event) {
            let address = this.address;
            address.addressDetail = event.detail.value;
            this.setData({
                address: address
            });
        },

        bindIsDefault() {
            let address = this.address;
            address.isDefault = !address.isDefault;
            this.setData({
                address: address
            });
        },

        getAddressDetail() {
            let that = this;
            util.request(api.AddressDetail, {
                id: that.addressId
            }).then(function (res) {
                if (res.errno === 0) {
                    if (res.data) {
                        that.setData({
                            address: res.data
                        });
                    }
                }
            });
        },

        setRegionDoneStatus() {
            let that = this;
            let doneStatus = that.selectRegionList.every((item) => {
                return item.code != 0;
            });
            that.setData({
                selectRegionDone: doneStatus
            });
        },

        chooseRegion() {
            let that = this;
            this.setData({
                openSelectRegion: !this.openSelectRegion
            }); //设置区域选择数据

            let address = this.address;

            if (address.areaCode > 0) {
                let selectRegionList = this.selectRegionList;
                selectRegionList[0].code = address.areaCode.slice(0, 2) + '0000';
                selectRegionList[0].name = address.province;
                selectRegionList[1].code = address.areaCode.slice(0, 4) + '00';
                selectRegionList[1].name = address.city;
                selectRegionList[2].code = address.areaCode;
                selectRegionList[2].name = address.county;
                let regionList = area.getList('county', address.areaCode.slice(0, 4));
                regionList = regionList.map((item) => {
                    //标记已选择的
                    if (address.areaCode === item.code) {
                        item.selected = true;
                    } else {
                        item.selected = false;
                    }

                    return item;
                });
                this.setData({
                    selectRegionList: selectRegionList,
                    regionType: 3,
                    regionList: regionList
                });
            } else {
                let selectRegionList = [
                    {
                        code: 0,
                        name: '省份'
                    },
                    {
                        code: 0,
                        name: '城市'
                    },
                    {
                        code: 0,
                        name: '区县'
                    }
                ];
                this.setData({
                    selectRegionList: selectRegionList,
                    regionType: 1,
                    regionList: area.getList('province')
                });
            }

            this.setRegionDoneStatus();
        },

        selectRegionType(event) {
            let that = this;
            let regionTypeIndex = event.target.dataset.regionTypeIndex;
            let selectRegionList = that.selectRegionList; //判断是否可点击

            if (regionTypeIndex + 1 == this.regionType || (regionTypeIndex - 1 >= 0 && selectRegionList[regionTypeIndex - 1].code <= 0)) {
                return false;
            }

            let selectRegionItem = selectRegionList[regionTypeIndex];
            let code = selectRegionItem.code;
            let regionList;

            if (regionTypeIndex === 0) {
                // 点击省级，取省级
                regionList = area.getList('province');
            } else {
                if (regionTypeIndex === 1) {
                    // 点击市级，取市级
                    regionList = area.getList('city', code.slice(0, 2));
                } else {
                    // 点击县级，取县级
                    regionList = area.getList('county', code.slice(0, 4));
                }
            }

            regionList = regionList.map((item) => {
                //标记已选择的
                if (that.selectRegionList[regionTypeIndex].code == item.code) {
                    item.selected = true;
                } else {
                    item.selected = false;
                }

                return item;
            });
            this.setData({
                regionList: regionList,
                regionType: regionTypeIndex + 1
            });
            this.setRegionDoneStatus();
        },

        selectRegion(event) {
            let that = this;
            let regionIndex = event.target.dataset.regionIndex;
            let regionItem = this.regionList[regionIndex];
            let regionType = this.regionType;
            let selectRegionList = this.selectRegionList;
            selectRegionList[regionType - 1] = regionItem;

            if (regionType == 3) {
                this.setData({
                    selectRegionList: selectRegionList
                });
                let regionList = that.regionList.map((item) => {
                    //标记已选择的
                    if (that.selectRegionList[that.regionType - 1].code == item.code) {
                        item.selected = true;
                    } else {
                        item.selected = false;
                    }

                    return item;
                });
                this.setData({
                    regionList: regionList
                });
                this.setRegionDoneStatus();
                return;
            } //重置下级区域为空

            selectRegionList.map((item, index) => {
                if (index > regionType - 1) {
                    item.code = 0;

                    if (index == 1) {
                        item.name = '城市';
                    } else {
                        item.name = '区县';
                    }
                }

                return item;
            });
            this.setData({
                selectRegionList: selectRegionList,
                regionType: regionType + 1
            });
            let code = regionItem.code;
            let regionList = [];

            if (regionType === 1) {
                // 点击省级，取市级
                regionList = area.getList('city', code.slice(0, 2));
            } else {
                // 点击市级，取县级
                regionList = area.getList('county', code.slice(0, 4));
            }

            this.setData({
                regionList: regionList
            });
            this.setRegionDoneStatus();
        },

        doneSelectRegion() {
            if (this.selectRegionDone === false) {
                return false;
            }

            let address = this.address;
            let selectRegionList = this.selectRegionList;
            address.province = selectRegionList[0].name;
            address.city = selectRegionList[1].name;
            address.county = selectRegionList[2].name;
            address.areaCode = selectRegionList[2].code;
            this.setData({
                address: address,
                openSelectRegion: false
            });
        },

        cancelSelectRegion() {
            this.setData({
                openSelectRegion: false,
                regionType: this.regionDoneStatus ? 3 : 1
            });
        },

        cancelAddress() {
            uni.navigateBack();
        },

        saveAddress() {
            console.log(this.address);
            let address = this.address;

            if (address.name == '') {
                util.showErrorToast('请输入姓名');
                return false;
            }

            if (address.tel == '') {
                util.showErrorToast('请输入手机号码');
                return false;
            }

            if (address.areaCode == 0) {
                util.showErrorToast('请输入省市区');
                return false;
            }

            if (address.addressDetail == '') {
                util.showErrorToast('请输入详细地址');
                return false;
            }

            let that = this;
            util.request(
                api.AddressSave,
                {
                    id: address.id,
                    name: address.name,
                    tel: address.tel,
                    province: address.province,
                    city: address.city,
                    county: address.county,
                    areaCode: address.areaCode,
                    addressDetail: address.addressDetail,
                    isDefault: address.isDefault
                },
                'POST'
            ).then(function (res) {
                if (res.errno === 0) {
                    //返回之前，先取出上一页对象，并设置addressId
                    var pages = getCurrentPages();
                    var prevPage = pages[pages.length - 2];
                    console.log(prevPage);

                    if (prevPage.route == 'pages/checkout/checkout') {
                        prevPage.setData({
                            addressId: res.data
                        });

                        try {
                            uni.setStorageSync('addressId', res.data);
                        } catch (e) {}

                        console.log('set address');
                    }

                    uni.navigateBack();
                }
            });
        }
    }
};
</script>
<style>
@import './addressAdd.css';
</style>
